import React, { FC } from 'react'
import BrokenLine from './components/BrokenLine/index'
import List from './components/List/index'
import Carousel from './components/Carousel/index'
import ProgressProps from './components/Progress/index'
import StatisticNumber from './components/StatisticNumber/index'
import FunctionPanel from './components/FunctionPanel/index'
import styles from './index.module.scss'
const Home: FC = () => {
  return (
    <div className={styles.homeContainer}>
      <div className={styles.echartsItemContainer}>
        <div className={`${styles.echartsItem}`}>
          <FunctionPanel></FunctionPanel>
        </div>
        <div className={styles.echartsItemLeft}>
          <div className={styles.echartsItem}>
            <StatisticNumber></StatisticNumber>
          </div>
          <div className={`${styles.echartsItem}`}>
            <ProgressProps></ProgressProps>
          </div>
        </div>
      </div>
      <div className={styles.echartsItemContainer}>
        <div className={`${styles.carousel} ${styles.echartsItem}`}>
          <Carousel></Carousel>
        </div>
        <div className={`${styles.echartsItem} ${styles.List}`}>
          <List></List>
        </div>
      </div>

      <div className={styles.brokenLineContainer}>
        <BrokenLine></BrokenLine>
      </div>
    </div>
  )
}
export default Home
